Multimedia Les 1

Je gerief klaarzetten

Doelstelling

1. Visual Code downloaden op je eigen computer en ermee leren werken.
2. Leren werken in de geïntegreerde terminal in Visual Code.
3. Kennismaking met CodePen.
4. Na deze les weet je waarvoor HTML dient en kan je een HTML basispagina maken.

Stappenplan

1. Lokaal op je eigen computer gaan we Visual Code gebruiken:
   1. Download Visual Studio Code
   2. Integrated Terminal in Visual Studio Code
   3. Tilo Mitra, Visual Studio Code Settings and Extensions for Faster JavaScript Development
   4. Download Node.js
   5. Installeer Browsersync om de HTML en CSS pagina's die je in Visual Code hebt gemaakt in je browser te kunnen testen.
   6. Om Browsersync te starten in 'watch' modus:
      browser-sync start --server --files "css/*.css" --watch
2. Kennis maken met CodePen
3. Overal waar je Cloud9 ziet staan, werk je in de terminal.
4. Beginnen met HTML
   1. Waarvoor dient HTML
   2. Overzicht
   3. HTML schrijven
   4. HTML commentaar
   5. HTML Basiselementen
   6. Semantische HTML

Opdracht

1. Maak in je rootmap voor de school een submap met de naam multimedia.
2. In de map multimedia maak je een bestand met de naam index.html.
3. Deze HTML pagina is je homepagina voor de module Multimedia. Op die pagina komen links naar alle oefeningen in de opeenvolgende lessen en naar de examenopdracht.
4. In de index.html pagina:
   1. zorg ervoor de de browser weet dat deze pagina in het nederlands is opgesteld;
   2. gebruik meta tags om aan te geven:
      1. wie de pagina geschreven heeft
      2. dat de woorden multimedia, oefeningen, opdrachten, html sleutelwoorden voor die webpagina zijn
      3. op welke datum en tijdstip waarop die pagina werd gemaakt
   3. de titel 'Multimedia', die in de tab van het browservenster verschijnt, plaats je in het title element van het head element.
   4. gebruik het address element om aan te geven dat jij de webpagina hebt gemaakt en zal onderhouden
   5. een hoofdtitel met de tekst 'Webontwikkeling oefeningen en opdrachten' plaats je in een h1 element
   6. maak een geordende lijst met de volgende items erin:
      1. html
      2. css
      3. navigatie
      4. pseudoklassen
      5. tabellen
      6. formulieren
      7. multimedia
      8. JavaScript
      9. PHP
   7. Maak de opdracht lokaal in Visual Studio Code en plaats het index.html bestand in de root van je workspace.